<!--  -->
<template>
  <div class="home">
    <div class="title">
      <span class="concern" @click="toRouter('concern')">我的关注></span>
    </div>
    <div class="flex grow grid">
      <div class="flex shrink column searchBox">
        <div class="txt">按股东或牛散名称<br />查询增持数据</div>
        <search holderType="0"></search>
      </div>
      <div class="flex shrink column searchBox">
        <div class="txt">按机构名称<br />查询增持数据数据</div>
        <search holderType="1"></search>
      </div>
      <div class="flex shrink column list flex-wrap">
        <div class="item flex shrink" @click="toRouter('ggzc')">
          查询全市场高管增持数据>
        </div>
        <div class="item flex shrink" @click="toRouter('dgdzc')">
          查询全市场大股东增持数据>
        </div>
        <div class="item flex shrink" @click="toRouter('gdrs')">
          查询全市场股东人数数据>
        </div>
      </div>
    </div>
    <div class="hotSearch">
      <div class="holderBox">
        <div class="subtitle">热搜股东</div>
        <div class="list">
          <span
            class="item"
            v-for="(item, index) in holderList"
            :key="index"
            @click="toDetail(0, item)"
            >{{ item.holderName }}</span
          >
        </div>
      </div>
      <div class="organBox">
        <div class="subtitle">热搜机构</div>
        <div class="list">
          <p
            class="item"
            v-for="(item, index) in organList"
            :key="index"
            @click="toDetail(1, item)"
          >
            {{ item.holderName }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from "../components/search";
const holder = [
  { holderName: "黄佩玲", orgCode: "200097408" },
  { holderName: "杨燕灵", orgCode: "200097742" },
  { holderName: "何雪萍", orgCode: "200096227" },
  { holderName: "邬凌云", orgCode: "200138330" },
  { holderName: "陈平", orgCode: "200095449" },
  { holderName: "金兴旺", orgCode: "230756187" },
  { holderName: "张武", orgCode: "200105368" },
  { holderName: "张勇", orgCode: "200085113" },
  { holderName: "刘志强 ", orgCode: "200085701" },
  { holderName: "周龄松", orgCode: "" },
];
const organ = [
  { holderName: "香港中央结算有限公司", orgCode: "200473904" },
  { holderName: "招商证券香港有限公司", orgCode: "200042503" },
  { holderName: "中央汇金资产管理有限责任公司", orgCode: "200773003" },
  { holderName: "全国社保基金一一三组合", orgCode: "200421325" },
  { holderName: "交通银行-融通行业景气证券投资基金", orgCode: "200041075" },
  { holderName: "挪威中央银行-自有资金", orgCode: "200574917" },
  {
    holderName: "上海明汯投资管理有限公司-明汯价值成长1期私募投资基金",
    orgCode: "208738134",
  },
  {
    holderName: "vanguard total international stock index fund",
    orgCode: "200379080",
  },
  {
    holderName:
      "haitong international securities company limited-account client",
    orgCode: "200491965",
  },
  {
    holderName: "中国人寿保险股份有限公司-传统-普通保险产品-005l-ct001沪",
    orgCode: "200331096",
  },
];
export default {
  data() {
    return {
      holderList: [],
      organList: [],
    };
  },

  components: { search },

  computed: {},

  mounted() {
    this.handler();
    window.attention = () => {
      this.toRouter("concern");
    };
  },

  methods: {
    handler() {
      this.holderList = holder;
      this.organList = organ;
    },
    toRouter(name) {
      this.$router.push({ name });
    },
    toDetail(type, row) {
      this.$store.commit("set", {
        key: "holder",
        value: row,
      });
      this.$router.push({ name: ["nszc", "jgzc"][type] });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  padding-top: 40px;
  width: 1200px;
  margin: 0 auto;
  .title {
    height: 31px;
    background: url($PIC_URL + "/tlbypcWeb/monitor/title.png") no-repeat center;
    margin-bottom: 30px;
    text-align: right;
    .concern {
      display: inline-block;
      width: 104px;
      height: 28px;
      background: linear-gradient(0deg, #343845, #4e596d);
      border: 1px solid #3d3d4b;
      border-radius: 2px;
      cursor: pointer;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 28px;
      &:hover {
        background: linear-gradient(180deg, #b93636, #6a0101);
        border: 1px solid #b83636;
      }
    }
  }
  .grid {
    justify-content: space-between;
    .searchBox {
      width: 350px;
      height: 430px;
      background: url($PIC_URL + "/tlbypcWeb/monitor/bg.png") no-repeat center;
      padding: 49px 25px 0;
      box-sizing: border-box;
      .txt {
        font-size: 22px;
        text-align: center;
        line-height: 32px;
        color: #fc9f41;
        padding-bottom: 40px;
      }
    }
    .list {
      width: 420px;
      height: 430px;
      flex-direction: row;
      align-content: space-between;
      .item {
        height: 120px;
        background: url($PIC_URL + "/tlbypcWeb/monitor/bg_2.png") no-repeat
          center;
        width: 100%;
        color: #cccccc;
        font-size: 26px;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        &:hover {
          color: #2c7eff;
          text-decoration: underline;
        }
      }
    }
  }
  .hotSearch {
    margin-top: 40px;
    border: 1px solid #2b2d36;
    border-radius: 8px;
    .subtitle {
      font-size: 20px;
      color: #fc9f41;
      text-align: center;
      padding: 16px 0;
    }
    .holderBox {
      width: 1100px;
      margin: 0 auto;
      border-bottom: 1px solid #2b2d36;
      .list {
        text-align: center;
        padding-bottom: 20px;
        .item {
          font-size: 18px;
          color: #cccccc;
          padding: 0 10px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
            color: #2c7eff;
          }
        }
      }
    }
    .organBox {
      .list {
        text-align: center;
        padding-bottom: 20px;
        line-height: 26px;
        .item {
          font-size: 18px;
          color: #cccccc;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
            color: #2c7eff;
          }
        }
      }
    }
  }
}
</style>
